<template>
  <div v-dialog-drag>
    <el-dialog
      title='数据源配置'
      :visible.sync='configureFlag'
      width='35%'
      append-to-body
      :before-close='close'
    >
      <el-card v-loading='loading' shadow='never'>
        <div class='h400'>
          <el-tree
            ref='tree'
            :data='tree'
            show-checkbox
            default-expand-all
            node-key='id'
            highlight-current
            :props='defaultProps'
            :default-checked-keys='defaultChecked'
            @check='handleCheck'
          />
        </div>
      </el-card>
      <span slot='footer' class='dialog-footer'>
        <el-button size='mini' @click='configureFlag = false'>取消</el-button>
        <el-button type='primary' size='mini' @click='handleConfim'>确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { configDataMonitorIds, getStationTree, updateConfigData } from '@/api/report'

export default {
  name: 'dataConfigure',
  props: ['reportId', 'confingId', 'stationId', 'level'],
  data() {
    return {
      configureFlag: false,
      tree: [],
      defaultProps: {
        children: 'child',
        label: 'name',
      },
      defaultChecked: [],
      loading: true,
    }
  },
  methods: {
    /**
     * @description: 左侧树形图check事件
     * @author: qyc
     */
    handleCheck() {
      this.checkedData = this.$refs.tree.getCheckedKeys(true, false)
    },

    /**
     * @description:数据源tree
     * @author: qyc
     */
    getStationTree() {
      getStationTree({ level: this.level, station_id: this.stationId }).then(res => {
        this.tree = res.data.data
      }).finally(() => {
        this.loading = false
      })
    },

    /**
     * @description:数据源配置详情
     * @author: qyc
     */
    handleConfigDataMonitorIds() {
      configDataMonitorIds({ report_id: this.reportId, config_id: this.confingId }).then(res => {
        this.defaultChecked = res.data.monitor_ids
        this.checkedData = res.data.monitor_ids.map(Number)
      })
    },

    /**
     * @description:数据源配置保存
     * @author: qyc
     */
    handleConfim() {
      const mapData = new Map()
      const groupTree = this.tree.length && this.tree[0].child
      groupTree.forEach(item => {
        mapData.set(item.id, [])
        Array.isArray(item.child) && item.child.length && item.child.forEach(item1 => {
          this.checkedData.indexOf(item1.id) !== -1 ? mapData.set(item.id, [...mapData.get(item.id), item1.id]) : ''
        })
      })

      const report_config_data = []
      for (const [k, v] of mapData) {
        report_config_data.push({ group_id: k, monitor_ids: v })
      }

      updateConfigData({ report_id: this.reportId, report_config_id: this.confingId, report_config_data }).then(() => {
        this.close()
        this.$message({
          message: '数据源配置成功',
          type: 'success',
        })
      })
    },

    /**
     * @description: 打开弹窗
     * @author: qyc
     */
    open() {
      this.configureFlag = true
      this.level && this.stationId && this.getStationTree()
      this.reportId && this.confingId && this.handleConfigDataMonitorIds()
    },

    /**
     * @description: 关闭弹窗
     * @author: qyc
     */
    close() {
      this.configureFlag = false
      this.$refs.tree.setCheckedKeys([])
    },
  },
}
</script>

<style lang='scss' scoped>
::v-deep.el-dialog__body {
  padding: 3px 30px;
  overflow-y: auto;
}

.h400 {
  height: 400px;
  overflow-y: auto;
}

.h400::-webkit-scrollbar {
  display: none;
}
</style>
